﻿
/*PC平台*/
@media only screen and (min-width : 1224px)
{
    /*全局样式*/
    :root
    {
        /*长度基准，它用来自适应不同平台的长度*/
        --lengthReference: 1.75;
    }
}

/*平板平台*/
@media only screen and (min-width : 667px) and (max-width : 1224px)
{
    /*全局样式*/
    :root
    {
        /*长度基准，它用来自适应不同平台的长度*/
        --lengthReference: 1.25;
    }
}

/*手机平台*/
@media only screen and (max-width : 667px)
{
    /*全局样式*/
    :root
    {
        /*长度基准，它用来自适应不同平台的长度*/
        --lengthReference: 1;
    }
}

/*横向屏幕，即宽大于高，一般用于电脑*/
@media (orientation: landscape)
{
    /*占满屏幕，并且在横屏时自动旋转*/
    .horizontalScreen
    {
        min-width: 100dvw;
        min-height: 100dvh;
    }
}

/*竖向屏幕，即高大于宽，一般用于手机*/
@media (orientation: portrait)
{
    /*占满屏幕，并且在横屏时自动旋转*/
    .horizontalScreen
    {
        min-width: 100dvh;
        min-height: 100dvw;
        transform-origin: left top;
        transform: translateX(100dvw) rotate(90deg);
    }
}

/*全局样式*/
:root
{
    /*全局中等gap属性*/
    --gapMedium: calc(1ch * var(--lengthReference));
    /*全局中等padding属性*/
    --paddingMedium: calc(1ch * var(--lengthReference));
    /*全局极端紧凑gap属性*/
    --gapExtremeSmall: calc(var(--gapMedium) * 0.25);
    /*全局紧凑gap属性*/
    --gapSmall: calc(var(--gapMedium) * 0.5);
    /*全局宽松gap属性*/
    --gapBig: calc(var(--gapMedium) * 2);
    /*全局极端紧凑padding属性*/
    --paddingExtremeSmall: calc(var(--paddingMedium) * 0.25);
    /*全局紧凑padding属性*/
    --paddingSmall: calc(var(--paddingMedium) * 0.5);
    /*全局宽松padding属性*/
    --paddingBig: calc(var(--paddingMedium) * 2);
    /*中等圆角样式*/
    --mediumRadius: 20px;
}

/*占满屏幕，并且在横屏时自动旋转*/
.horizontalScreen
{
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
}


/*普通容器样式*/
.commonContainers
{
    display: flex;
    flex-direction: column;
    gap: var(--gapMedium);
}

/*占满屏幕布局*/
.occupyScre
{
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100dvw;
    min-height: 100dvh;
    box-sizing: border-box;
}

/*最顶层组件的布局样式*/
.topLayout
{
    padding: 5dvmin;
}

/*简单虚拟化容器的CSS样式*/
.virtualizationSimpleContainer
{
    display: grid;
    gap: var(--gapMedium);
    padding: var(--paddingMedium);
}

/*豆腐块组件容器的CSS样式*/
.tofuCubesContainer
{
    display: flex;
    flex-direction: column;
    row-gap: var(--paddingSmall);
}

/*豆腐块组件图标的CSS样式*/
.tofuCubesIcon
{
}

/*豆腐块组件文本的CSS样式*/
.tofuCubesText
{
    text-align: center;
}

/*文本渲染组件的容器样式*/
.textRenderingContainer
{
    overflow-wrap: break-word;
    white-space: pre-line;
    margin: 0;
}

/*自动播放按钮容器样式*/
.autoPlayButtonCntainer
{
    display: grid;
    grid-template: 1fr 1fr 1fr/1fr 1fr 1fr
}

/*自动播放按钮容器的第一个元素样式*/
div.autoPlayButtonCntainer > *:first-child
{
    grid-area: 1/1/-1/-1
}

/*自动播放按钮的直接父容器样式*/
.playButtonFather
{
    grid-area: 2/2;
    display: flex;
    place-content: center;
}

/*播放按钮的公共样式*/
.playButton
{
    background-color: rgba(128,128,128,0.5);
    border-radius: 50%;
    cursor: pointer;
    width: 100%;
    max-width: 4em;
}

/*表示一个换行样式*/
.wrap
{
    white-space: pre-wrap;
}

/*相对于父元素的中部居中布局，水平垂直方向皆居中，它还会填满父元素*/
.centerMiddRelativelyFill
{
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*相对于父元素的中部居中布局，水平垂直方向皆居中*/
.centerMiddRelatively
{
    left: 0;
    top: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*相对于屏幕的中部居中布局，水平垂直方向皆居中*/
.centerMiddAbsolute
{
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100dvw;
    min-height: 100dvh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*表示一个紧凑居中布局，它一般用来排列按钮*/
.compactCentered
{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

/*表示一个紧凑居中布局，它一般用来排列按钮，它还会填满父容器*/
.compactCenteredFill
{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 100%;
}

/*全屏蒙版容器样式*/
.maskingContainerFullScreen
{
    position: fixed;
    z-index: -9999;
}

/*亚克力容器样式*/
.acrylicContainer
{
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%
}

/*亚克力蒙版样式*/
.acrylicMask
{
    backdrop-filter: saturate(1.8) blur(15px);
    -webkit-backdrop-filter: saturate(1.8) blur(15px);
    width: 100%;
    height: 100%
}

/*IOS蒙版容器样式*/
.iosContainer
{
    border-radius: var(--mediumRadius);
    width: 100%;
    height: 100%;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/*IOS蒙版浅色样式*/
.iosContainerUndertint
{
    background: rgba(251, 251, 253, 0.4);
}

/*IOS蒙版深色样式*/
.iosContainerDarkness
{
    background: rgba(4, 4, 2, 0.4);
}
